<!--督导评教-->
<template>
  <div class="wrapper-container" style="width:100%">
    <div>
       <div class="search-container-left" style="margin:0">
        <div class="search-container-item">
          <span>学期：</span>
          <el-select
            v-model="xq"
            style="width: 90px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in xueqiList"
              :key="item.value"
              :label="item.xqmc"
              :value="item.xqmc"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>月份：</span>
          <el-select
            v-model="yf"
            style="width: 88px"
            size="mini"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in yfList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <div class="search-button">
          <img src="../../../assets/assessment/icon-search.png" alt=""/>
          <span @click="selectGrougs">查询</span>
        </div>
      </div>
    </div>
    <div class="table-container">
      <el-table
        :data="tableData"
        style="width: 100%"
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class"
      >
        <el-table-column prop="index" label="序号"  type="index" width="156" align="center">
        </el-table-column>
        <el-table-column
          prop="rwmc"
          label="任务名称"
          width="155"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="sj" label="时间" width="155" align="center">
        </el-table-column>
        <el-table-column
          prop="tkjc"
          label="听课节次"
          width="155"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="dd"
          label="地点"
          width="155"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="btkrxm"
          label="被听课人姓名"
          width="155"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="zzdw"
          label="组织单位"
          width="155"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="lxr" label="联系人" align="center">
        </el-table-column>
      </el-table>
    </div>
     <div class="pagination-block">
      <el-pagination
        prev-text="上一页"
        next-text="下一页"
        :page-size="2"
         @current-change="handleCurrentChange"
        layout="prev, pager, next, jumper"
        :total=total
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {pjlist} from "@/api/teacher/supervision";
import {yueGroup,selectGroug} from "@/api/teacher/admin";
import {
  reqGetXqList
} from "@/api/course/courses";
export default {
  data() {
    return {
      total:"",
      size:"10",
      current:"1",
      supervisorid: '1',
      tableData: [],
      yfList: [
        {
          value: "01月",
          label: "01月",
        },
        {
          value: "02月",
          label: "02月",
        },
        {
          value: "03月",
          label: "03月",
        },
        {
          value: "04月",
          label: "04月",
        },
        {
          value: "05月",
          label: "05月",
        },
        {
          value: "06月",
          label: "06月",
        },
        {
          value: "07月",
          label: "07月",
        },
        {
          value: "08月",
          label: "08月",
        },
        {
          value: "09月",
          label: "09月",
        },
        {
          value: "10月",
          label: "10月",
        },
        {
          value: "11月",
          label: "11月",
        },
        {
          value: "12月",
          label: "12月",
        }
      ],
      xq: "",
      yf: "01月",
      xqList: [],
    };
  },
  mounted() {
    this.getXqList()
    //this.pjlist();
  },
  methods: {
    // 获取学期院历列表
    async getXqList() {
      const result = await reqGetXqList();
      if (result.data.code == 200) {
        this.xueqiList = result.data.data;
        this.xq = result.data.data.length > 0 ? result.data.data[0].xqmc : '';
        this.selectGrougs()
      }
    },
     //月份查询接口
    // yueGroup(){
    //   let obj = {
    //       term : this.xq
    //    }
    //   return new Promise(resolve => {
         
    //      yueGroup(obj).then((res) => {
    //         this.yfList = res.data.data
    //         console.log(this.yfList,"222222")
           
    //     })
    //   })
     
    // },
    handleCurrentChange(val) {
      this.current = val
      this.selectGroup()
      console.log(this.current,"999888")
    },
    selectGrougs(){
      let obj = {}
       obj.specialSupervisionInfoVO ={
          month : this.yf,
          term : this.xq
       },
       obj.query={
          size :this.size,
          current : this.current 
       }
       return new Promise(resolve => {
         console.log(obj,"111111111111111111111111")
         selectGroug(obj).then((res) => {
             this.tableData = res.data.data.records
             this.total = res.data.data.total
            // this.total = res.data.data.total
            console.log( res.data.data,"aaaaaaaaaaaaaaaaaaaaa")
        })
      })
    },
    //  查看专项督导信息
    // pjlist() {
    //   let number = 1;
    //   return new Promise(() => {
    //     //教员查询到所有数据
    //     pjlist(this.supervisorid).then(res => {
    //       this.tableData = res.data.data;
    //       for (let i = 0; i < this.tableData.length; i++) {
    //         this.tableData[i].index = number++;
    //       }
    //       console.log("======专项督导信息========" + res.data.data)
    //       console.log(res, 'res')

    //     })

    //   });

    // },
  },
};
</script>
<style lang="less" scoped>
@fontFamily:"Microsoft YaHei";
.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;
  // margin: 15px 0;
  > ::v-deep div.el-table__header-wrapper {
    > table.el-table__header {
      > thead {
        > tr.xpaas-header-row-class {
          padding: 0;
          height: 76px;
          background-color: #edf2f9;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          > th.xpaas-header-cell-class {
            font-weight: bold;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
  > ::v-deep div.el-table__body-wrapper {
    > table.el-table__body {
      > tbody {
        > tr.xpaas-row-class {
          > td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
          > td.xpaas-cell-class {
            height: 76px;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            > div.cell {
              font-weight: normal;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}
.pagination-block {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.search-container-item {
      color: #004ca7;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      margin-right: 30px;
      > span {
        margin-right: 6px;
      }
    }
     .search-container-left {
      display: flex;
      flex-direction: row;
    }
      .search-button {
      width: 77px;
      height: 28px;
      line-height: 28px;
      background: #f1f8fe;
      border: 1px solid #51aef6;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      > span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #51aef6;
      }
      > img {
        width: 20px;
        height: 20px;
        margin-right: 4px;
      }
    }
.table-container {
  margin-top: 30px;

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .wrapper-button {
    display: flex;
    flex-direction: column;
    align-items: center;

    > div {
      margin-bottom: 8px;
    }
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/special.less";

.table-container {
  margin-top: 30px;

  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}

.save-button {
  width: 87px;
  height: 36px;
  line-height: 36px;
  background: #fff6ef;
  border: 1px solid #f3b815;
  border-radius: 6px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #f3b815;
  text-align: center;
  margin: 82px auto;
}

.zuoyou {
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
